import Vue from "vue";

const styleList = {
	width: 'width',
	height: "height",
	padding: 'padding',
	align: 'textAlign',
	fontSize: 'fontSize',
	backgroundColor: 'backgroundColor',
	color: "color",
	left: "left",
	right: "right",
	top: "top",
	bottom: "bottom",
	zIndex: "zIndex",
	opacity: "opacity",
	minWidth: 'minWidth'
}

// 设置样式对象
const setStyle = (data) => {
	const style = new Object();
	for (let key in data) {
		if (styleList[key]) {
			const type = styleList[key];
			style[type] = _setValue(key, data[key]);
		}
	};

	function _numberStyle(type) {
		let style = ['width', 'minWidth', 'height', 'top', 'left', 'right', 'bottom', 'fontSize'];
		return style.find((e) => {
			return e === type
		})
	};

	function _setValue(key, val) {
		var value = val;
		if (typeOf(val) === "Number") {
			if (_numberStyle(key)) {
				value = `${val}px`;
			}
		} else if (typeOf(val) === "String") {
			if (key === 'width' && val === 'auto') {
				value = `100%`;
			}
		}
		
		return value;
	};

	console.log(style);

	return style;
};

/**
 *  判断类型
 * @params 需要判断类型的对象
 * @returns  返回类型
 */
const typeOf = data => {
	let type = null;
	if (Object.prototype.toString.call(data) === "[object Number]") {
		type = "Number";
	} else if (Object.prototype.toString.call(data) === "[object String]") {
		type = "String";
	} else if (Object.prototype.toString.call(data) === "[object Undefined]") {
		type = "Undefined";
	} else if (Object.prototype.toString.call(data) === "[object Array]") {
		type = "Array";
	} else if (Object.prototype.toString.call(data) === "[object Null]") {
		type = "Null";
	} else if (Object.prototype.toString.call(data) === "[object Object]") {
		type = "Object";
	}
	return type;
};

Vue.prototype.$_methods = {
	setStyle
};
